<template>
    <div class="sharelife">
        <div class="sharelife-box">
            <!-- 顶部返回图标 -->
            <div class="header">
                <van-icon name="arrow-left" size="40" @click="$router.go(-1)"/>
            </div>
            <!-- 主题title -->
            <div class="title">分享你的动态</div>
            <!-- 图片上传区 -->
            <div class="pic" v-show="fileList!=0">
                <van-uploader :after-read="afterRead" v-model="fileList" multiple="true" :max-count="6"/>
            </div>
             <div class="pic2" v-show="fileList==0">
                <van-uploader :after-read="afterRead" v-model="fileList" multiple="true" :max-count="6"/>
            </div>
            <!-- 内容部份 -->
            <div class="main">
                <div>请输入内容</div>
                <van-cell-group>
                   <van-field  type="textarea" rows="4" v-model="value" @input="getFieldValue"></van-field>
                </van-cell-group>
            </div>
            <!-- 点击上传部份 -->
            <div class="up" @click="upLoad">
                <button>分享</button>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                fileList: [],//存放上传的图片信息
                value:'',//存放输入的内容
                uid:this.$store.state.id,//当前登录用户的ID
                upic:null,//当前登录用户的头像
                uname:'',//当前登录用户的昵称
                filename:'',
                base64:'',
                imgss:[],
            };
            
        },
        methods: {
            
            // 上传图片函数
            afterRead(file) {
            // 此时可以自行将文件上传至服务器
                console.log(file);
                //console.log(file.length);
               // console.log(this.fileList[0].content);

            },
            base64ImgtoFile(base64, filename = `${this.fileList[0].file.name}`){
                console.log(this.fileList[0].file.name);
                const arr = base64.split(',')
                //console.log(arr);
                const mime = arr[0].match(/:(.*?);/)[1]  //image/png
                //console.log(mime);
                const suffix = mime.split('/')[1]
                console.log(suffix);
                const bstr = atob(arr[1])
                //console.log(bstr);
                let n = bstr.length
                const u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], `${filename}`, {
                    type: mime
                })
            },
            //const blob = this.base64ImgtoFile(dataurl),
             // 获取登录用户id后，请求他的头像信息
            userPJ(){
                let uid =this.uid
                //console.log(uid);
                let url1=`http://localhost:3333/me/${uid}`
                this.$axios.get(url1).then(res=>{
                    //console.log(res.data.data);
                    this.upic=res.data.data[0].upic
                    this.uname=res.data.data[0].uname
                    //console.log(this.imgdd,this.uname);
                })
                console.log(this.value);
            },
            //当前时间戳
            getUnix:function(){
                var date =new Date()
                return date.getTime()
            },
            // field输入框内容发生变化时触发
            getFieldValue(e){
                console.log(e)
                this.value=e
            },

            // 点击分享上传到数据库
            upLoad(){
                // 当前用户的头像和昵称,时间戳
                let upic=encodeURIComponent(this.upic)
                let uname=this.uname
                var now=this.getUnix()
                var value=this.value
                //var img=this.fileList
                var imgs=''

                //var url = window.location.href
                // 遍历上传的图片
                for(var i=0;i<this.fileList.length;i++){
                    console.log(i);
                    //var urls=[]
                    // 由于base64编码传入数据库时+被自动剔除，所以先将代码转化成作为 URI 组件进行编码
                    let base64=encodeURIComponent(this.fileList[i].content)
                    //console.log(base64);
                    // const blob = this.base64ImgtoFile(base64)
                    // console.log(blob);
                    // const blobUrl = window.webkitURL.createObjectURL(blob) ||window.URL.createObjectURL(blob);
                    // console.log(blobUrl);
                    //urls.push(blobUrl)  
                    // 将拿到的地址编码拼接到html代码上
                    imgs=`<div><img src="${base64}"></div>`
                    //console.log(imgs);
                    // 将循环得到的imgs字符串拼接成数组
                    this.imgss.push(imgs)
                    
                }
                // 将代码数组重新换成字符串放到数据库中
                 let imgssString=this.imgss.join(' ')
                 console.log(imgssString);
                //  请求添加烘焙圈接口
                const url=`http://localhost:3333/circle/add`
                let params=`ename=${uname}&epic=${upic}&info=${value}&img=${imgssString}&up_time=${now}`
                this.$axios.post(url,params).then(res=>{
                    console.log(res);
                })
                this.$router.push('circle')
                this.$router.push({})
                console.log(upic,uname,now,value,this.imgss);
               
                
            }
        },
        mounted(){
            this.userPJ()
        }
    }
</script>

<style lang="scss" scoped>
.sharelife{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border: 15px solid rgba(240, 169, 27,0.7);
}
.sharelife-box{
    width: 100%;
    height: 100%;
    //border: 1px solid red;
    background-color: rgb(253, 249, 249);
    //<-- 设置标题样式-->
    .title{
        height: 8vh;
        text-align: center;
        font-size: 8vw;
        margin: 4vw 0 6vw 0;
        //border: 1px solid red;
    }
    // <--设置有图片时的样式-->
    // 已上传图片时
    .pic{
        height: 32vh;
        //border: 1px  solid rgba(240, 169, 27,0.5);
        margin:0 3vw;
        border-radius: 10px;
        box-shadow: 2vw 2vh 2vh 0 rgba(235, 230, 230,0.4);
        background-color: rgba(240, 169, 27,0.4);
        //修改上传图片的样式
        ::v-deep .van-uploader__upload{
            margin: 1vw;
            width: 26vw;
            height: 26vw;
            background-color: rgba(240, 169, 27,0.7);
        }
        ::v-deep .van-image__img{
            width: 25.5vw;
            height: 25.5vw;
             border: 1px solid rgba(240, 169, 27,0.4);
             border-radius: 5px;
        }
        ::v-deep .van-uploader__preview-image{
            width:100%;
            height: 100%;
           
        }
        ::v-deep .van-uploader__preview{
            margin: 1.2vw;
        }
        ::v-deep .van-uploader__upload-icon{
            font-size: 10vw;
        }
    }
    //未上传图片时
    .pic2{
        height: 30vh;
        width: 85vw;
        //border: 1px  solid rgba(240, 169, 27,0.7);
        margin:0 auto;
        border-radius: 10px;
        box-shadow: 2vw 2vh 2vh 0 rgba(235, 230, 230,0.4);
        ::v-deep .van-uploader__upload{
            width: 85vw;
            height: 30vh;
            margin: 0;
            background-color: rgba(240, 169, 27,0.4);

        }
        ::v-deep .van-uploader__upload-icon{
            font-size: 20vw;
        }

        
    }
    // 内容部份
    .main{
        margin: 5vh 3vw;
        height: 20vh;
        //border: 1px  solid rgba(240, 169, 27,0.7);
        border-radius: 10px;
        box-shadow: 2vw 3vh 2vh 0 rgba(235, 230, 230,0.4);
        div:first-child {
            margin: 2vw 0;
            font-size: 5.2vw;
            font-weight: 6vw;
            text-align: center;
        }
        ::v-deep .mint-cell-wrapper{
                //border: 1px solid rgba(240, 169, 27,0.7);
                border-radius: 10px;
                background-color: rgba(240, 169, 27,0.05);
                padding: 0;
        }
        ::v-deep .van-cell{
            background-color: rgba(240, 169, 27,0.4);
        }
    }
    // 上传按钮
    .up{
        height: 7vh;
        margin:8vh 3vw;
        box-shadow: 2vw 2vh 2vh 0 rgba(235, 230, 230,0.4);
        button{
            width: 100%;
            height: 100%;
            background-color: rgba(240, 169, 27,0.4);
            border: 1px solid rgba(240, 169, 27,0);
            border-radius: 20px;
            font-size: 5vw;
            font-weight: 6vw;
        }
    }
}
</style>